<style scoped></style>

<template>
    <div>
        <Modal
            title="添加地区"
            :value="value"
            @on-ok="save"
            @on-visible-change="visibleChange"
            width="500"
            :mask-closable="false"
        >
            <Form ref="regionForm" label-position="top" :rules="regionRule" :model="region">
                <FormItem label="地区名称" prop="name">
                    <Input v-model="region.name"></Input>
                </FormItem>
                <FormItem label="热门" prop="isHot">
                    <Checkbox v-model="region.isHot"></Checkbox>
                </FormItem>
            </Form>
            <div slot="footer">
                <Button @click="cancel">{{L('Cancel')}}</Button>
                <Button @click="save" type="primary">{{L('OK')}}</Button>
            </div>
        </Modal>
    </div>
</template>

<script lang="ts">
import { Component, Vue, Inject, Prop, Watch } from "vue-property-decorator";
import Util from "../../lib/util";
import AbpBase from "../../lib/abpbase";
import Region from "../../store/entities/region";
import Ajax from "../../lib/ajax";
@Component({
    components: {}
})
export default class CreateRegion extends AbpBase {
    @Prop({ type: Boolean, default: false }) value: boolean;
    @Prop({type:[Number,null],default:null}) parentId: number;
    region: Region = new Region();
    async save() {
        this.region.parentId = this.parentId;
        console.log(JSON.stringify(this.region));
        (this.$refs.regionForm as any).validate(async (valid: boolean) => {
            if (valid) {
                await Ajax.post('/api/services/app/Region/Create',this.region);
                (this.$refs.regionForm as any).resetFields();

                this.$emit("save-success");
                this.$emit("input", false);
            }
        });
    }
    cancel() {
        (this.$refs.regionForm as any).resetFields();
        //console.log(this.region);
        this.$emit("input", false);
    }
    visibleChange(value: boolean) {
        if (!value) {
            this.$emit("input", value);
        }
    }
    regionRule = {
        name: [
            {
                required: true,
                message: "请输入地区名称",
                trigger: "blur"
            },
            {
                type: 'string',
                max: 256,
                message: "地区名称不得超过256个字符",
                trigger: "blur"
            }
        ]
    };
}
</script>